<template>
  <div>
    <el-form ref="form" :model="formData" label-width="100px">
      <el-form-item prop="oldPwd" label="原密码：">
        <el-input v-model="formData.oldPwd"></el-input>
        <div class="tip">由英文字母和数字组成，长度不超过20个字符</div>
      </el-form-item>
      <el-form-item prop="newPwd" label="新密码：">
        <el-input v-model="formData.newPwd"></el-input>
        <div class="tip">由英文字母和数字组成，长度不超过20个字符</div>
      </el-form-item>
      <el-form-item prop="newPwdAgain" label="确认新密码：">
        <el-input v-model="formData.newPwdAgain"></el-input>
        <div class="tip">由英文字母和数字组成，长度不超过20个字符</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleMod">修改</el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        formData: {
          oldPwd: "",
          newPwd: "",
          newPwdAgain: ""
        }
      }
    },
    methods: {
      handleMod () {

      },
      handleReset () {
        this.$refs["form"].resetFields();
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-form {
    width: 400px;
    margin-left: calc(50% - 300px);
  }

  .el-form-item {
    margin-bottom: 30px;
  }

  .tip {
    margin-bottom: -22px;
    font-size: 12px;
    color: #949eaf;
  }
</style>
